<template>
	<view class="inputp">
		<view class="inputs">
			<image class='searchimg' src="/static/img/search.png" alt="" @click='search' />
			<input type="text" placeholder-style="font-size: 28rpx;color: #141414;font-weight: 400;" v-model="searchval"
				:placeholder="placeholder" ref='searchinput' :focus='isfocus' class='scaninput' @click='clickinput'>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			hassearchbtn: Boolean, //是否有搜索按钮
			hasscanbtn: Boolean, //是否有扫码按钮
			isfocus: Boolean, //是否默认focus
			hasgosearch: Boolean, //是否要跳转到搜索界面
			types: Number, //跳转的时候的参数type值
			placeholder: {
				type: String,
				default: '教育未来的方向'
			},
			gourl: { //跳转的搜索页面
				type: String,
				default: '/pages/scan/scan'
			}
		},
		data() {
			return {
				showsearchbtn: false,
				searchval: ''
			};
		},
		methods: {
			// 点击input的时候
			clickinput() {
				uni.navigateTo({
					url: `/pages/index/search/search`
				})
				// console.log('测试')
				// var me = this;
				// if (me.hasgosearch) {
				// 	console.log('需要跳转')
				// 	uni.navigateTo({
				// 		url: `/pages/index/search/search`
				// 	})
				// }
			},
			// 搜索
			search() {
				var me = this;
				if (me.searchval == '') {
					uni.showToast({
						icon: 'none',
						title: '请先输入再索索'
					})
					return;
				}
				me.$emit('serach', me.searchval)
			},
			// 点击扫码的时候
			clickscan() {
				var me = this;
				if (me.hasscanbtn) {
					uni.navigateTo({
						url: `${me.gourl}?cameratype=scan&type=${me.types}`
					})
					return;
				}
				uni.scanCode({
					success(res) {
						var result = res.result;
						var arrs = result.split('?')[1].split('&')
						var code = '';
						arrs.forEach(e => {
							var arr = e.split('=')
							if (arr[0] == 'code') {
								code = arr[1];
							}
						})
						me.searchval = code;
					}
				})
			}
		},
		watch: {
			searchval(v) {
				var me = this;
				me.$emit('inputchange', v)
				if (v != '') {
					me.showsearchbtn = true;
				} else {
					me.showsearchbtn = false;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.inputp {
		
		padding: 20upx 0 20upx 0;
		width: 90%;
		height: 150rpx !im;
		margin: auto;
		.inputs {
			text-align: center;
			position: relative;
			border-top: 2px solid #141414;
			border-bottom: 2px solid #141414;
			border-left: 4px solid #141414;
			border-right: 4px solid #141414;
			.scaninput {
				padding: 10rpx 80upx 10rpx 80upx;
			}
			.searchimg {
				width: 1.5em;
				height: 1.5em;
				position: absolute;
				top: 10rpx;
				left: 28upx;
			}

			.scanimg {
				width: 1em;
				height: 1em;
				position: absolute;
				top: 25upx;
				right: 20upx;
			}

			.searchbtn {
				position: absolute;
				right: 20upx;
				top: 15upx;
				border-radius: 5upx;
				background: #007AFF;
				color: #fff;
				width: 4em;
				line-height: 2em;
				text-align: center;
				font-size: 0.8em;
			}
		}
	}
</style>
